Estoy tratando de actualizar el estado de una acción que se controla a través de Vuex. Lo sé inicialmente, no puedo actualizar el estado de la acción sin hacerlo directamente a través de una mutación. Sin embargo, realmente no quería hacer eso porque estoy tratando de usarlo en una devolución de llamada. Así que intenté clonar esta matriz de acciones y luego usar esta variable. Sin embargo, esto parece producir el mismo error:

no mutar el estado de la tienda vuex fuera de los controladores de mutación

Cada vez que mi modal cambia, agrego un observador, que verifica si el modal tiene acciones y si lo "clona" en una variable local usando un bucle for.

 @Watch('modal') onModalChanged(modal: ModalData) { if (modal && modal.actions) { for (let i = 0; i < modal.actions.length; i++) { this.actions[i] = modal.actions[i]; } } }

Luego tengo un bucle v-for dentro de mi plantilla que recorre la variable local de acciones y realiza un @click .

La acción se configura de la siguiente manera al construir el modal:

 modalStore.show({ ..., actions: [ { text: 'Save', theme: 'positive', click: (action: Action) => { } } ] });

Dentro del método de clic, quiero poder establecer el estado de carga de la acción, es decir

 click: (action: Action) => { action.loading = true; }

De esta manera, puedo determinar si el botón debe mostrar un estado de carga, pero aquí es donde radica el problema, ya que obtengo la tienda no mutar vuex.

¿Tengo que pasar por un estado, ya que esto es con modales, podría haber múltiples, lo que significaría que tendría que hacer un método como el siguiente:

 updateButtonState(modal: ModalData, actionIndex: number, loading: boolean) { modal.actions[actionIndex].loading = true; }

Pero en el momento de crear el modal, no tengo una referencia para pasar el modal.

¿Hay una solución o una mejor manera de abordar esto?

El método mínimo de action.loading = true sería ideal, aunque sé que esto podría no ser posible.